<template>
  <div>
    <!-- header头部 -->
    <Logo />
    <div class="contend">
      <!-- Url地址 -->
      <p class="addressUrl orHeader">
        <span>Url地址：</span>
        <input
          type="text"
          v-model="Generates"
          id="ipt"
          disabled="true"
          style="width: 415px"
        />
        <span class="copy" @click="copy()" v-if="judgeCopy">复制</span>
      </p>
      <!-- 学校和销售人员填写 -->
      <div class="essentialInformation">
        <!-- 学校 -->
        <p class="school orHeader">
          <span>学校 ：</span>
          <input type="text" maxlength="20" v-model="shcoolName" style="width: 240px" />
        </p>
        <!-- 销售人员 -->
        <p class="sale orHeader">
          <span>销售人员 ：</span>

          <el-select
            v-model="saleId"
            filterable
            placeholder="请选择"
            style="width: 170px"
            @change="getValue"
          >
            <el-option
              v-for="(item, index) in salesmans"
              :key="index"
              :label="item.sale_user"
              :value="index"
            >
            </el-option>
          </el-select>
          <span style="margin-left: 30px" v-if="salePhone != ''">{{ salePhone }}</span>
          <div style="float:left;margin: 10px 0 0 60px;">
            <el-radio v-model="myType" label="1">大数据</el-radio>
            <el-radio v-model="myType" label="2">人工智能</el-radio>
          </div>
        </p>
      </div>
      <!-- 大数据教学平台 -->
      <div class="teaching-platform platformOr" style="position: relative; top: 15px">
        <p class="title">
          <span class="category">教学</span>
          <span class="addAccount" @click="teachingAddAccount()">添加账号</span>
        </p>
        <div class="accountOrRole">
          <ul>
            <li
              v-for="(item, index) in teachingAddAccounts"
              :key="index"
              style="width: 560px"
            >
              <p class="accountNumber">
                <span>账号 ：</span>
                <input type="text" maxlength="20" v-model="item.userNum" />
              </p>
              <p class="del-user" @click="delUser(teachingAddAccounts,index)">
                  <i class="el-icon-delete"></i>
              </p>
              <p class="role">
                <span>角色 ：</span>
                <el-radio v-model="item.role" label="1">教师</el-radio>
                <el-radio v-model="item.role" label="2">学生</el-radio>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 大数据实训平台 -->
      <div class="training-platform platformOr" style="position: relative; top: 30px">
        <p class="title">
          <span class="category">实训</span>
          <span class="addAccount" @click="trainingAddAccount()">添加账号</span>
        </p>
        <div class="accountOrRole">
          <ul>
            <li
              v-for="(item, index) in trainingAddAccounts"
              :key="index"
              style="width: 560px"
            >
              <p class="accountNumber">
                <span>账号 ：</span>
                <input type="text" maxlength="20" v-model="item.userNum" />
              </p>
              <p class="del-user" @click="delUser(trainingAddAccounts,index)">
                  <i class="el-icon-delete"></i>
              </p>
              <p class="role">
                <span>角色 ：</span>
                <el-radio v-model="item.role" label="1">教师</el-radio>
                <el-radio v-model="item.role" label="2">学生</el-radio>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 虚拟仿真平台 -->
      <div class="xnfz-platform platformOr" style="position: relative; top: 30px">
        <p class="title">
          <span class="category">仿真</span>
          <span class="addAccount" @click="xnfzAddAccount()">添加账号</span>
        </p>
        <div class="accountOrRole">
          <ul>
            <li
              v-for="(item, index) in emulatorAddAccounts"
              :key="index"
              style="width: 560px"
            >
              <p class="accountNumber">
                <span>账号 ：</span>
                <input type="text" maxlength="20" v-model="item.userNum" />
              </p>
              <p class="del-user" @click="delUser(emulatorAddAccounts,index)">
                  <i class="el-icon-delete"></i>
              </p>
              <p class="role">
                <span>角色 ：</span>
                <el-radio v-model="item.role" label="1">教师</el-radio>
                <el-radio v-model="item.role" label="2">学生</el-radio>
              </p>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- 智联网平台 -->
      <div class="zlw-platform platformOr" style="position: relative; top: 30px">
        <p class="title">
          <span class="category">智联</span>
          <span class="addAccount" @click="zlwAddAccount()">添加账号</span>
        </p>
        <div class="accountOrRole">
          <ul>
            <li
              v-for="(item, index) in mhlAddAccounts"
              :key="index"
              style="width: 560px"
            >
              <p class="accountNumber">
                <span>账号 ：</span>
                <input type="text" maxlength="20" v-model="item.userNum" />
              </p>
              <p class="del-user" @click="delUser(mhlAddAccounts,index)">
                  <i class="el-icon-delete"></i>
              </p>
              <p class="role">
                <span>角色 ：</span>
                <el-radio v-model="item.role" label="1">教师</el-radio>
                <el-radio v-model="item.role" label="2">学生</el-radio>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 大数据科研平台 -->
      <div
        class="scientific-research-platform platformOr"
        style="position: relative; top: 45px"
      >
        <p class="title">
          <span class="category">科研</span>
          <span class="addAccount" @click="scientificAddAccount()">添加账号</span>
        </p>
        <div class="accountOrRole">
          <ul>
            <li
              v-for="(item, index) in scientificAddAccounts"
              :key="index"
              style="width: 280px"
            >
              <p class="accountNumber">
                <span>账号 ：</span>
                <input type="text" maxlength="20" v-model="item.userNum" />
              </p>
              <p class="del-user" @click="delUser(scientificAddAccounts,index)">
                  <i class="el-icon-delete"></i>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 数据管理系统 -->
      <div class="data-management platformOr" style="position: relative; top: 60px">
        <p class="title">
          <span class="category">数据</span>
          <span class="addAccount" @click="managementAddAccount()">添加账号</span>
        </p>
        <div class="accountOrRole Last">
          <ul>
            <li
              v-for="(item, index) in managementAddAccounts"
              :key="index"
              style="width: 280px"
            >
              <p class="accountNumber">
                <span>账号 ：</span>
                <input type="text" maxlength="20" v-model="item.userNum" />
              </p>
              <p class="del-user" @click="delUser(managementAddAccounts,index)">
                  <i class="el-icon-delete"></i>
              </p>
            </li>
          </ul>
        </div>
        <!-- 生成Url -->
        <p class="Preservation" v-if="judgeOne" @click="Generate()">生成Url</p>
        <!-- 保存按钮 -->
        <p class="Preservation" v-if="judgeTow" @click="Preservation()">保存</p>
      </div>
    </div>
  </div>
</template>
<script>
import Logo from "../../components/Logo";
export default {
  components: {
    Logo,
  },
  data() {
    return {
      myType:"1",
      // 下拉框index的值
      saleId: "",
      // 学校名字
      shcoolName: "",
      // 平台ID
      systemId: "",
      // 传过去选项的ID
      saleIdtow: "",
      salePhone: "",
      // 大数据实训平台添加账号
      teachingAddAccounts: [
        {
          role: "1",
          userNum: "",
        },
      ],
      trainingAddAccounts: [
        {
          role: "1",
          userNum: "",
        },
      ],
      scientificAddAccounts: [
        {
          role: "1",
          userNum: "",
        },
      ],
      managementAddAccounts: [
        {
          role: "1",
          userNum: "",
        },
      ],
      //虚拟仿真
      emulatorAddAccounts: [
        {
          role: "1",
          userNum: "",
        },
      ],
      //智联
      mhlAddAccounts: [
        {
          role: "1",
          userNum: "",
        },
      ],
      // url
      Generates: "",
      // 销售人员信息
      salesmans: "",
      // 判断生成url、保存和复制的显示与隐藏
      judgeOne: true,
      judgeTow: false,
      judgeCopy: false,
    };
  },
  created() {
    this.salesman();
  },
  methods: {
    getValue(key) {
      let self = this;
      console.log(key);
      self.salePhone = self.salesmans[key].sale_phone;
      self.saleIdtow = self.salesmans[key].sale_user;
    },
    // 点击复制Url
    copy() {
      this.value = this.Generates;
      console.log(this.Generates);
      const input = document.createElement("input"); // 这里的逻辑就是新建立一个input标签，
      document.body.appendChild(input); // 把input添加到body中
      input.setAttribute("value", this.value); // 设置input的value值，this.hd3href
      input.select(); // select 选中input里面的所有文本内容
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        // 提示消息
        message: "复制成功",
        type: "success",
      });
      document.body.removeChild(input); // 最近需要销毁
    },
    //删除
    delUser(arr,index){
        arr.splice(index, 1);
    },
    // 大数据教学平台添加账号
    teachingAddAccount() {
      let Arr = {
        role: "1",
        userNum: "",
      };
      this.teachingAddAccounts.push(Arr);
    },
    // 大数据实训平台添加账号
    trainingAddAccount() {
      let Arr = {
        role: "1",
        userNum: "",
      };
      this.trainingAddAccounts.push(Arr);
    },
    // 虚拟仿真平台添加账号
    xnfzAddAccount() {
      let Arr = {
        role: "1",
        userNum: "",
      };
      this.emulatorAddAccounts.push(Arr);
    },
    // 智联网平台添加账号
    zlwAddAccount() {
      let Arr = {
        role: "1",
        userNum: "",
      };
      this.mhlAddAccounts.push(Arr);
    },
    // 大数据科研平台添加账号
    scientificAddAccount() {
      let Arr = {
        role: "1",
        userNum: "",
      };
      this.scientificAddAccounts.push(Arr);
    },
    // 数据管理系统添加账号
    managementAddAccount() {
      let Arr = {
        role: "1",
        userNum: "",
      };
      this.managementAddAccounts.push(Arr);
    },
    // 点击生成url
    Generate() {
      let self = this;
      console.log(1111);
      if (self.shcoolName == "") {
        self.$notify({
          type: "danger",
          message: "请填写学校名称",
        });
        return;
      }
      if (self.salePhone == 0) {
        self.$notify({
          type: "danger",
          message: "请填写销售人员信息",
        });
        return;
      }
      if (
        self.teachingAddAccounts[0].userNum == "" &&
        self.trainingAddAccounts[0].userNum == "" &&
        self.scientificAddAccounts[0].userNum == "" &&
        self.managementAddAccounts[0].userNum == "" &&
        //虚拟仿真
        self.emulatorAddAccounts[0].userNum == "" &&
        //智联网
        self.mhlAddAccounts[0].userNum == ""
      ) {
        self.$notify({
          type: "danger",
          message: "请填写至少一项账号信息",
        });
        return;
      }
      self.$axios
        .post("/school/addSchoolInfo", {
          type:self.myType,
          // 学校名称
          schoolName: self.shcoolName,
          systemId: self.systemId,
          saleId: self.saleIdtow,
          // 手机号
          salePhone: self.salePhone,
          // 教学
          systemJx: self.teachingAddAccounts,
          // 实训
          systemSx: self.trainingAddAccounts,
          // 仿真
          systemFz: self.emulatorAddAccounts,
          // 智联
          systemZl: self.mhlAddAccounts,
          // 科研
          systemKy: self.scientificAddAccounts,
          // 数据
          systemSj: self.managementAddAccounts,

          stutas: 1,
        })
        .then((response) => {
          let res = response.data;
          if (res.data.code == 200) {
            $("#ipt").prop("disabled", false); //可编辑
            $("#ipt").prop("readonly", "readonly");
            self.judgeOne = false;
            self.judgeTow = true;
            self.judgeCopy = true;
            self.Generates = res.data.url;
            self.$message({
              message: "获取URL成功",
              type: "success",
            });
          } else if (res.data.code == 5001) {
            self.$notify({
              type: "danger",
              message: "学校名称重复",
            });
          } else {
            self.$message.error(res.message);
          }
        });
    },
    //获取销售人员
    salesman() {
      let self = this;
      self.$axios.get("/school/querySaleUser?saleId=" + self.saleId).then((response) => {
        let res = response.data;
        if (res.code === 200) {
          self.salesmans = res.data;
          console.log(res.data, 11111);
        } else {
          self.$notify({
            type: "danger",
            message: res.message,
          });
        }
      });
    },
    // 录入信息
    Preservation() {
      let self = this;
      if (self.shcoolName == "") {
        self.$notify({
          type: "danger",
          message: "请填写学校名称",
        });
        return;
      }

      if (
        self.teachingAddAccounts[0].userNum == "" &&
        self.trainingAddAccounts[0].userNum == "" &&
        self.scientificAddAccounts[0].userNum == "" &&
        self.managementAddAccounts[0].userNum == "" &&
        //仿真
        self.emulatorAddAccounts[0].userNum == "" &&
        //智联
        self.mhlAddAccounts[0].userNum == ""
      ) {
        self.$notify({
          type: "danger",
          message: "请填写至少一项账号信息",
        });
        return;
      }
      self.$axios
        .post("/school/addSchoolInfo", {
          type:self.myType,
          // 学校名称
          schoolName: self.shcoolName,
          systemId: self.systemId,
          saleId: self.saleIdtow,
          // 手机号
          salePhone: self.salePhone,
          // 教学
          systemJx: self.teachingAddAccounts,
          // 实训
          systemSx: self.trainingAddAccounts,
          // 仿真
          systemFz: self.emulatorAddAccounts,
          // 智联
          systemZl: self.mhlAddAccounts,
          // 科研
          systemKy: self.scientificAddAccounts,
          // 数据
          systemSj: self.managementAddAccounts,
          stutas: 2,
        })
        .then((response) => {
          let res = response.data;
          if (res.data.code === 200) {
            self.$message({
              message: "保存成功",
              type: "success",
            });
            self.$router.push({
              path: "/addPage",
            });
            // for(var i = 0; i < self.teachingAddAccount.length;i++){
            //     if(self.teachingAddAccount[i].userNum != ''){
            //         this.salesmans.push(1)
            //     }
            // }
          } else if (res.data.code == 5001) {
            self.$notify({
              type: "danger",
              message: "学校名称重复",
            });
          } else {
            self.$message.error(res.message);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.contend {
  width: 1200px;
  position: relative;
  margin: 0 auto;
  color: #333333;
}
.addressUrl {
  width: 100%;
  height: 40px;
  margin-top: 30px;
  margin-bottom: 20px;
}
.orHeader {
  position: relative;
  margin-left: 33px;
  span {
    font-size: 16px;
  }
  .copy {
    font-size: 14px;
    color: #409eff;
    border: 1px solid #b3d8ff;
    background: #ecf5ff;
    border-radius: 5px;
    margin-left: 5px;
    padding: 5px 10px;
    cursor: pointer;
  }
  input {
    margin-left: 5px;
    font-size: 18px;
    position: relative;
    padding: 9px 0px 9px 11px;
    margin-left: 9px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    z-index: 10;
    outline: none;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #bdcada;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #bdcada;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: #bdcada;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: #bdcada;
  }
  input:focus {
    border-color: #66afe9;
    outline: 0;
  }
}
.essentialInformation {
  width: 100%;
  height: 40px;
  position: relative;
  margin-bottom: 28px;
  p {
    float: left;
    position: relative;
  }
  .sale {
    margin-left: 100px;
  }
}
.platformOr {
  clear: both;
  .title {
    position: relative;
    margin-left: 33px;
    margin-bottom: 27px;
    .category {
      font-size: 18px;
      font-weight: bold;
    }
    .addAccount {
      font-size: 14px;
      color: #409eff;
      border: 1px solid #b3d8ff;
      border-radius: 5px;
      background: #ecf5ff;
      padding: 5px 11.5px;
      margin-left: 25px;
      cursor: pointer;
    }
  }
  .accountOrRole {
    position: relative;
    li {
      height: 40px;
      position: relative;
      margin-left: 33px;
      margin-bottom: 27px;
      float: left;
      &:first-child{
          .del-user{
              display: none;
          }
      }
    }
    .accountNumber {
      float: left;
      input {
        width: 160px;
        font-size: 18px;
        position: relative;
        padding: 9px 0px 9px 11px;
        border: 1px solid #d7d7d7;
        margin-left: 9px;
        border-radius: 5px;
        z-index: 10;
        outline: none;
      }
      input::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #bdcada;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #bdcada;
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #bdcada;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #bdcada;
      }
      input:focus {
        border-color: #66afe9;
        outline: 0;
      }
    }
    .role {
      position: relative;
      margin-left: 30px;
      float: left;
      line-height: 40px;
    }
    .del-user{
        float: left;
        line-height: 40px;
        margin-left:10px;
        cursor: pointer;
        transition: .3s;
        &:hover{
            transform: scale(1.2);
            color: #409EFF;
        }
    }
  }
  .Last {
    p:last-child {
      position: relative;
      margin-bottom: 100px;
    }
  }
}
.Preservation {
  width: 150px;
  height: 40px;
  color: #fff;
  background: #387ee8;
  clear: both;
  position: relative;
  margin: 100px auto;
  top: 20px;
  text-align: center;
  line-height: 40px;
  border-radius: 10px;
  cursor: pointer;
  &:hover {
    background: #0161f1;
  }
}
</style>
<style lang="scss">
// 角色选项样式
.accountOrRole {
  .el-radio__inner {
    border: 1px solid #333333;
  }
  .el-radio__label {
    font-size: 16px;
    position: relative;
    top: 1px;
  }
}
// 销售人员选项
.orHeader {
  .el-input--suffix .el-input__inner {
    margin-left: 9px;
  }
}
</style>
